import React, {FC} from 'react';
import {View, StyleSheet, Image, Text, TouchableOpacity} from 'react-native';
import icon_search from '../../../assets/icon_search.png';
import icon_shop_car from '../../../assets/icon_shop_car.png';
import icon_orders from '../../../assets/icon_orders.png';
import icon_menu_more from '../../../assets/icon_menu_more.png';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {RootStackParamList} from '../../../../App';
type PropsType = {};
const Title: FC<PropsType> = () => {
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
  const onSearchPress = () => {
    navigation.push('SearchGoods');
  };
  return (
    <View style={styles.titleLayout}>
      <TouchableOpacity style={styles.searchLayout} onPress={onSearchPress}>
        <Image source={icon_search} style={styles.searchImg} />
        <Text style={styles.searchTxt}>bm吊带1</Text>
      </TouchableOpacity>
      <Image source={icon_shop_car} style={styles.titleImg} />
      <Image source={icon_orders} style={styles.titleImg} />
      <Image source={icon_menu_more} style={styles.titleImg} />
    </View>
  );
};

const styles = StyleSheet.create({
  titleLayout: {
    width: '100%',
    height: 40,
    flexDirection: 'row',
    backgroundColor: 'white',
    alignItems: 'center',
    paddingHorizontal: 16,
  },
  searchLayout: {
    flex: 1,
    height: 32,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
    borderRadius: 16,
    paddingHorizontal: 16,
  },
  searchImg: {
    width: 18,
    height: 18,
    resizeMode: 'contain',
  },
  searchTxt: {
    fontSize: 14,
    color: '#bbb',
    marginStart: 6,
  },
  titleImg: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
    marginHorizontal: 6,
  },
});
export default Title;
